<template>
	<view>
		<view class="questionprogress combg">
			<view class="conttop">
				<view class="conttopl">
					<u-icon name="clock" color="#00e315" size="20" class="uicon"></u-icon><text>测评需要用时：10分钟</text>
				</view>
				<view class="conttopr">当前：第{{capitalindex[firstfloorindex]}}部分
					({{secondfloorindex+1}}/{{qdata[firstfloorindex].questiondata.length}})</view>
			</view>
			<view class="progress-box">
				<u-line-progress active-color="#febd00" :percent="secondfloorper"></u-line-progress>
			</view>
			<view class="btitle">{{capitalindex[firstfloorindex]}}、{{qdata[firstfloorindex].title}}</view>
			<view class="progress-box">
				<u-line-progress active-color="#febd00" :percent="firstfloorper"></u-line-progress>
			</view>
		</view>

		<view class="questest combg">
			<view class="title">{{secondfloorindex+1}}、{{qdata[firstfloorindex].questiondata[secondfloorindex].title}}
			</view>
			<view class="listitem" :class="{'active':item.answerchecked}" v-on:click="answerclick(index)"
				v-for="(item,index) in items" :key="item.answertitle">
				{{ item.answertitle }}
			</view>
			<view class="texttip">{{secondfloorindex+1}}/{{qdata[firstfloorindex].questiondata.length}}</view>
		</view>

		<view class="back" v-on:click="back" v-show="firstfloorindex||secondfloorindex">
			<u-icon name="play-left-fill" color="#ffe18a" size="28" class="uicon"></u-icon><text>返回上一题</text>
		</view>
	</view>
</template>

<script>
	import {
		qdata
	} from './qdata'
	export default {
		data() {
			return {
				firstfloorindex: 0,
				secondfloorindex: 0,
				capitalindex: ["一", "二", "三", "四", "五", "六"],
				qdata
			}
		},
		methods: {
			answerclick: function(index) {
				var eachanswers = this.qdata[this.firstfloorindex].questiondata[this.secondfloorindex].answers;
				var havechecked = eachanswers.some(function(item) {
					return item.answerchecked == true
				});
				if (havechecked) {
					eachanswers.map(function(item) {
						item.answerchecked = false
						return item
					})
				}
				eachanswers[index].answerchecked = true;
				setTimeout(() => {
					if (this.secondfloorindex < this.qdata[this.firstfloorindex].questiondata.length - 1) {
						this.secondfloorindex++;
					} else if (this.firstfloorindex < this.qdata.length - 1) {
						this.secondfloorindex = 0, this.firstfloorindex++;
					} else {
						var group = [];
						var groupsum = [];
						var answeredqdata = this.qdata;
						for (var i = 0; i < answeredqdata.length; i++) {
							group[i] = [];
							for (var j = 0; j < answeredqdata[i].questiondata.length; j++) {

								for (var k = 0; k < answeredqdata[i].questiondata[j].answers.length; k++) {

									if (answeredqdata[i].questiondata[j].answers[k].answerchecked) {
										group[i].push(answeredqdata[i].questiondata[j].answers[k].answerscore);
									}

								}
							}
						}
						for (var i = 0; i < group.length; i++) {
							var groupeachsum = group[i].reduce((accumulator, currentValue) => accumulator +
								currentValue);
							groupsum.push(groupeachsum);
						}
						var mlaformdata = JSON.parse(localStorage.getItem('mlaform'));
						uni.request({
							header: {
								"content-type": "application/x-www-form-urlencoded"
							},
							url: 'http://form.jizhiyi.cn//wp-json/contact-form-7/v1/contact-forms/22/feedback',
							method: 'POST',
							data: {
								'yname': mlaformdata.name,
								'ysex': mlaformdata.sex,
								'yage': mlaformdata.age,
								'ytel': mlaformdata.tel,
								'weburl': location.href +
									`?g0=${groupsum[0]}&g1=${groupsum[1]}&g2=${groupsum[2]}`
							},
							success:(res)=>{
								console.log(res);
								uni.navigateTo({
									url: `/pages/report/report?g0=${groupsum[0]}&g1=${groupsum[1]}&g2=${groupsum[2]}`
								});
							}

						})
					}
				}, 100);

			},
			back: function() {
				if (this.firstfloorindex > 0 && this.secondfloorindex == 0) {
					this.firstfloorindex--;
					this.secondfloorindex = this.qdata[this.firstfloorindex].questiondata.length - 1;
				} else {
					this.secondfloorindex--;
				}
			}
		},
		computed: {
			firstfloorper: function() {
				return parseInt((((this.firstfloorindex + 1) / (this.qdata.length)).toFixed(2) * 100));
			},
			secondfloorper: function() {
				return parseInt((((this.secondfloorindex + 1) / (this.qdata[this.firstfloorindex].questiondata.length))
					.toFixed(2) * 100));
			},
			items: function() {
				return this.qdata[this.firstfloorindex].questiondata[this.secondfloorindex].answers;
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #ffc92a;
	}

	.conttop {
		display: flex;
		justify-content: space-between;
	}

	.conttopl text {
		vertical-align: middle;
		padding-left: 8rpx;
	}

	.progress-box {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.back {
		text-align: center;
	}

	.back text {
		vertical-align: middle;
		color: #7b5c00;
	}


	.questest .title {
		font-size: 32rpx;
		color: #594e3f;
		font-weight: 700;
		margin-bottom: 56rpx;
	}

	.questest .listitem {
		width: 622rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #706659;
		margin: 40rpx auto;
		background: #f5f5f7;
		border-radius: 20rpx;
		text-align: center;
	}

	.questest .listitem.active {
		background: #ffc92a;
	}


	.questest .texttip {
		font-size: 28rpx;
		color: #594e3f;
		text-align: center;
	}

	.back {
		padding-top: 60rpx;
		padding-bottom: 120rpx;
	}
</style>
